<template>
  <div id="map"
       style="width: 100%; height: 100%"></div>
</template>

<script>
import "ol/ol.css";
import { Map, View } from "ol";
import Tile from "ol/layer/Tile";
import { OSM } from "ol/source";
import { XYZ } from "ol/source";
import { Vector as VectorLayer } from "ol/layer";
import { Icon, Style } from "ol/style";
import VectorSource from "ol/source/Vector";
import Point from "ol/geom/Point";
import Feature from "ol/Feature";
import iconImg from "../../assets/img/logo.png"; //图片 可自定义

import { OverviewMap, defaults as defaultControls } from "ol/control";
export default {
  components: {},
  data () {
    return {
      map: null,
    };
  },
  watch: {},
  methods: {
    //点位显示
    showPoints () {
      let mapData = [
        {
          domain_id: 10000029,
          domain_name: "北京市第一看守所",
          domain_type_name: "看守所",
          gps_x: "116.40384397",
          gps_y: "39.91487908",
          count: 0,
          channel_id: "",
          group_idx: 1,
        },
        {
          domain_id: 10000028,
          domain_name: "北京市第一看守所",
          domain_type_name: "看守所",
          gps_x: "116.47324397",
          gps_y: "39.91927908",
          count: 0,
          channel_id: "",
          group_idx: 1,
        },
        {
          domain_id: 10000027,
          domain_name: "北京市第一看守所",
          domain_type_name: "看守所",
          gps_x: "116.43324397",
          gps_y: "39.93483908",
          count: 0,
          channel_id: "",
          group_idx: 1,
        },
        {
          domain_id: 10000026,
          domain_name: "北京市第一看守所",
          domain_type_name: "看守所",
          gps_x: "116.50382397",
          gps_y: "39.99487708",
          count: 0,
          channel_id: "",
          group_idx: 1,
        },
      ];
      let vectorLayer = new VectorLayer({
        source: new VectorSource(),
        style: new Style({
          image: new Icon({
            src: iconImg,
          }),
        }),
      });

      let features = [];
      mapData.forEach((item) => {
        if (item.gps_x && item.gps_y) {
          let newObj = Object.assign({}, item);
          newObj.geometry = new Point([Number(item.gps_x), Number(item.gps_y)]);
          features.push(new Feature(newObj));
        }
      });
      vectorLayer.getSource().addFeatures(features);
      this.map.addLayer(vectorLayer);
    },

    //初始化默认地图
    createMap () {
      let overviewMapControl = new OverviewMap({
        className: "ol-overviewmap ol-custom-overviewmap",
        layers: [
          new Tile({
            source: new XYZ({
              // url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
              // url: "http://t3.tianditu.com/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=e33bff145f017205e949052045b56087",
              url: "http://t4.tianditu.com/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk=e33bff145f017205e949052045b56087",
            }),
          }),
        ],
        view: new View({
          // projection: "EPSG:3857", //坐标系
          projection: "EPSG:4326", //坐标系
        }),
        collapseLabel: "»", //鹰眼展开时功能按钮上的标识
        label: "«", //鹰眼折叠时功能按钮上的标识
        collapsed: false, //初始为展开显示方式
      });

      this.map = new Map({
        target: "map",
        layers: [
          new Tile({
            // source: new OSM(),
            source: new XYZ({
              url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
            }),
          }),
        ],
        view: new View({
          center: [116.40387397, 39.91488908],
          zoom: 12,
          maxZoom: 20,
          projection: "EPSG:4326",
        }),
      });
      this.showPoints();
      //鹰眼控件
      this.map.addControl(overviewMapControl);
    },
  },
  created () { },
  mounted () {
    this.createMap();
  },
}
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
</style>